<template>
	<view class="userInfo">
      <image class="userPic" :src="store.state.headimgurl" mode="aspectFit"></image>
      <view class="userName">
      	{{store.state.nickname}}
      </view>
	  <button type="default" @click="toWxLogin()">
		  <image class="wxLogo" src="../../static/icon/wxLogo.png" mode="aspectFill"></image> 微信登录
		  </button>
	  <button type="primary" @click="logout()">退出登录</button>
	</view>
</template>

<script setup lang="ts">
import store from "../../store";
//微信登录
const toWxLogin=()=>{
	store.toLoginByWx();
}
//退出登录
const logout=()=>{
	store.logoutByWx();
}
</script>

<style lang="scss" scoped>
.userInfo {
	padding-top: 30%;
}

.userInfo .userPic {
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	width: 300upx;
	height: 300upx;
}
.wxLogo {
	width: 2rem;
	height: 2rem;
	vertical-align: middle;
}
.userName {
	margin-top: 2rem;
	margin-bottom: 2rem;
    line-height: 2rem;
	text-align: center;
	color: lightskyblue;
	font-size: 2rem;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}
button {
	margin-bottom: 2rem;
}
</style>
